<template>
  <cu-layout :navProp="{ placeholder: true, title: '在线签约', textColor: 'black' }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-online-signing-container`]">
      <uv-sticky bgColor="#fff" offsetTop="0" :customNavHeight="$Platform.navbar">
        <uv-tabs :list="list" :current="current" @change="handleChange" :scrollable="false" :customStyle="{ background: '#ffffff' }" lineColor=" #046f7e"></uv-tabs>
      </uv-sticky>
      <!-- 遮挡tabs 使其不可点击 -->
      <view class="tabs-masking" :style="{ top: `${$Platform.navbar}px` }"></view>
      <!-- 租约信息 -->
      <template v-if="current == 0">
        <view class="data-info-step0" :style="{ padding: stepOne != 0 ? '0 15px 130px' : '0' }">
          <template v-if="stepOne === 0">
            <view @click="handleSelectProject">
              <uv-input border="bottom" placeholder="请选择房源项目" inputAlign="right" disabledColor="white" disabled color="#999999" v-model="formData.projectName">
                <template v-slot:prefix>
                  <uv-text text="房源项目" size="13" margin="10rpx 0"></uv-text>
                </template>
                <template v-slot:suffix>
                  <uv-icon name="arrow-right"></uv-icon>
                </template>
              </uv-input>
            </view>
            <!-- <uv-input
              placeholder="请选择房源项目"
              border="bottom"
              inputAlign="right"
              disabledColor="white"
              disabled
              v-model="formData.projectName"
              suffixIcon="arrow-right"
              @click="handleSelectProject"
            >
              <template v-slot:prefix>
                <uv-text text="房源项目" margin="10rpx 0" :bold="true" color="black"></uv-text>
              </template>
            </uv-input> -->
            <uv-input
              placeholder="输入签约房间号"
              border="bottom"
              :disabled="formData.status == 'convert'"
              inputAlign="right"
              disabledColor="white"
              v-model="formData.roomName"
              suffixIcon="arrow-right"
              @input.trim="bindKeyInput"
            >
              <template v-slot:prefix>
                <uv-text text="输入房间号" size="13" margin="10rpx 0" color="black"></uv-text>
              </template>
            </uv-input>
            <view class="room-list" v-if="formData.status != 'convert'">
              <view class="tips">{{ formData.message }}</view>
              <view class="room-item" v-for="(item, index) in formData.roomList" :key="index" @click="handleSelectRoom(item)">
                <text>{{ item.statusVal }}</text>
                <text>{{ item.unit_name }}</text>
                <text>{{ item.room_name }}</text>
                <view class="price">
                  <uv-text :text="item.old_rent + '元/月'" size="10" color="black"></uv-text>
                  <uv-icon :color="formData.roomId == item.id ? theme : '#999999'" name="checkmark-circle-fill"></uv-icon>
                </view>
              </view>
            </view>
            <view class="fixed-wrap">
              <view class="fixed-button">
                <uv-button type="primary" text="确认选择" customStyle="margin-top: 10px" @click="stepOneSubmit"></uv-button>
              </view>
              <uv-safe-bottom></uv-safe-bottom>
            </view>
          </template>
          <template v-else-if="stepOne === 1">
            <view v-html="formData.online_sign_clause"></view>
            <uv-checkbox-group v-model="formData.checkboxValue" :activeColor="theme" shape="square" placement="column">
              <uv-checkbox :name="true" label="已阅读并同意 签约协议"></uv-checkbox>
            </uv-checkbox-group>
            <view class="fixed-wrap">
              <view class="fixed-button">
                <uv-button type="primary" text="重新选房" :plain="true" customStyle="margin-top: 10px" @click="previousStepOne"></uv-button>
                <uv-button type="primary" text="下一步" customStyle="margin-top: 10px" @click="stepOneSubmit"></uv-button>
              </view>
              <uv-safe-bottom></uv-safe-bottom>
            </view>
          </template>
          <template v-else-if="stepOne === 2">
            <view class="tips stepOne online-signing-card">
              <view class="title">房间信息</view>
              <view class="project-name ccc">{{ formData.projectName }}</view>
              <view class="room-name">{{ formData.beike_room_name }}-{{ formData.room_number }}</view>
              <view class="room-tag-wrap">
                <view v-if="formData.room_type_name" class="room-tag">{{ formData.room_type_name }}</view>
                <view v-if="formData.area" class="room-tag">{{ formData.area }}</view>
              </view>
              <view class="monthly-rent">
                <span class="price">{{ formData.old_rent }}</span> 元/间/月
              </view>
            </view>
            <view class="tips stepOne online-signing-card" v-if="companyInfo.enterprise_name">
              <view class="title">企业员工专属优惠</view>
              <view class="online-signing-row">
                <view class="left">认证企业</view>
                <view class="right">{{ companyInfo.enterprise_name }}</view>
              </view>
              <!-- <view class="online-signing-row">
                <view class="left">租金折扣</view>
                <view class="right">{{ companyInfo.discount }}</view>
              </view> -->
              <view class="online-signing-row">
                <view class="left">有效期</view>
                <view class="right">{{ companyInfo.expiration_date }}</view>
              </view>
              <view class="online-signing-row border_none">
                <view class="left">企业权益</view>
                <view class="right">{{ companyInfo.equity_content }}</view>
              </view>
              <view class="online-signing-row border_none small-tips">*实际优惠以门店最终确认为主</view>
            </view>
            <view v-for="(item, index) in formData.template" :key="index">
              <view v-if="item.list.length" class="tips stepOne online-signing-card">
                <view class="title">{{ item.key }}</view>
                <view class="online-signing-row" v-for="(items, indexs) in item.list" :key="indexs">
                  <view class="left">{{ items.title }}</view>
                  <view class="right">{{ items.des }}</view>
                </view>
              </view>
            </view>
            <view class="fixed-wrap">
              <view class="fixed-button">
                <uv-button type="primary" text="查看条款" :plain="true" customStyle="margin-top: 10px" @click="previousStepOne"></uv-button>
                <uv-button type="primary" text="下一步" customStyle="margin-top: 10px" @click="stepOneSubmit"></uv-button>
              </view>
              <uv-safe-bottom></uv-safe-bottom>
            </view>
          </template>
        </view>
      </template>
      <!-- 信息填写 -->
      <template v-if="current == 1">
        <!-- 身份弹窗 -->
        <uv-picker ref="picker" :columns="identityColumns" @confirm="identityConfirm"></uv-picker>
        <!-- 证件类型弹窗 -->
        <uv-picker ref="ref-document-type-picker" :columns="documentTypeColumns" @confirm="documentTypeConfirm"></uv-picker>
        <view class="data-info-step1">
          <view class="card data-info">
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="userFormData.phone">
              <template v-slot:prefix>
                <uv-text text="手机号码" size="13" margin="10rpx 0"></uv-text>
              </template>
            </uv-input>
            <uv-input border="bottom" inputAlign="right" disabledColor="white" color="#999999" placeholder="请输入通讯地址" v-model="userFormData.address">
              <template v-slot:prefix>
                <view style="display: flex; align-items: center">
                  <text class="require">*</text>
                  <uv-text text="通讯地址" size="13" margin="10rpx 0"></uv-text>
                </view>
              </template>
            </uv-input>
            <uv-input border="bottom" inputAlign="right" disabledColor="white" color="#999999" placeholder="请输入邮箱" v-model="userFormData.e_mail">
              <template v-slot:prefix>
                <view style="display: flex; align-items: center">
                  <text class="require">*</text>
                  <uv-text text="邮箱" size="13" margin="10rpx 0"></uv-text>
                </view>
              </template>
            </uv-input>
          </view>
          <view class="card data-info padding-right-0">
            <view @click="handleSelectIdentity">
              <uv-input border="bottom" inputAlign="right" disabledColor="white" disabled color="#999999" placeholder="请选择身份" v-model="userFormData.occupation">
                <template v-slot:prefix>
                  <view style="display: flex; align-items: center">
                    <text class="require">*</text>
                    <uv-text text="您的身份" size="13" margin="10rpx 0"></uv-text>
                  </view>
                </template>
                <template v-slot:suffix>
                  <view style="display: flex; align-items: center">
                    <uv-icon name="arrow-right"></uv-icon>
                  </view>
                </template>
              </uv-input>
            </view>
            <view v-if="pickerIncludes.includes(userFormData.occupation)" @click="handleSelectCompany">
              <uv-input border="bottom" inputAlign="right" disabledColor="white" disabled color="#999999" placeholder="请选择所属公司" v-model="userFormData.company">
                <template v-slot:prefix>
                  <uv-text text="所属公司" size="13" margin="10rpx 0"></uv-text>
                </template>
                <template v-slot:suffix>
                  <view style="display: flex; align-items: center">
                    <uv-icon name="arrow-right"></uv-icon>
                  </view>
                </template>
              </uv-input>
            </view>
          </view>
          <view class="card data-info">
            <uv-input border="bottom" inputAlign="right" disabledColor="white" color="#999999" placeholder="请输入紧急联系人姓名" v-model="userFormData.emergency_name">
              <template v-slot:prefix>
                <view style="display: flex; align-items: center">
                  <text class="require">*</text>
                  <uv-text text="紧急联系人姓名" size="13" margin="10rpx 0"></uv-text>
                </view>
              </template>
            </uv-input>
            <uv-input border="bottom" inputAlign="right" disabledColor="white" color="#999999" placeholder="请输入紧急联系人手机号" v-model="userFormData.emergency_tel">
              <template v-slot:prefix>
                <view style="display: flex; align-items: center">
                  <text class="require">*</text>
                  <uv-text text="紧急联系人手机号" size="13" margin="10rpx 0"></uv-text>
                </view>
              </template>
            </uv-input>
          </view>
          <!-- <view class="card data-info padding-right-0" @click="handleChangedocumentType">
            <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" v-model="userFormData.card_type">
              <template v-slot:prefix>
                <view style="display: flex; align-items: center">
                  <text class="require">*</text>
                  <uv-text text="证件类型选择" size="13" margin="10rpx 0"></uv-text>
                </view>
              </template>
              <template v-slot:suffix>
                <uv-icon name="arrow-right"></uv-icon>
              </template>
            </uv-input>
          </view> -->
          <view class="data-info-card"> </view>
          <view class="fixed-wrap">
            <view class="fixed-button">
              <uv-button type="primary" text="返回修改" :plain="true" customStyle="margin-top: 10px" @click="previousStep"></uv-button>
              <uv-button type="primary" text="下一步" customStyle="margin-top: 10px" @click="submit"></uv-button>
            </view>
            <uv-safe-bottom></uv-safe-bottom>
          </view>
        </view>
      </template>
      <!-- 身份验证 -->
      <template v-if="current == 2">
        <!-- 身份弹窗 -->
        <uv-picker ref="gender-picker" :columns="genderColumns" @confirm="genderConfirm"></uv-picker>
        <view class="data-info-step2">
          <template v-if="stepThree === 0">
            <view class="ID-card-wrap">
              <view class="ID-card" v-for="(item, index) in papersImages" :key="index">
                <template v-if="!item.value">
                  <view class="subscript-container" @click="handleUploadImage(index)">
                    <image class="left-top" :src="$CDN('/common/static/images/left-top-frame.png')"></image>
                    <image class="right-top" :src="$CDN('/common/static/images/right-top-frame.png')"></image>
                    <image class="left-bottom" :src="$CDN('/common/static/images/left-bottom-frame.png')"></image>
                    <image class="right-bottom" :src="$CDN('/common/static/images/right-bottom-frame.png')"></image>
                    <image class="preview" :src="$CDN(`/common/static/images/${item.preview}`)"></image>
                    <image class="upload-image" :src="$CDN('/common/static/images/camera.png')"></image>
                  </view>
                  <span class="tips">{{ item.tips }}</span>
                </template>
                <template v-else>
                  <view class="image-container" @click="handleUploadImage(index)">
                    <image class="upload-image" :src="$CDN('/common/static/images/camera.png')"></image>
                    <image class="value-image" :src="item.value"></image>
                  </view>
                </template>
              </view>
            </view>
            <view class="fixed-wrap">
              <view class="tips-container">
                <uv-checkbox-group v-model="agreement" :activeColor="theme" shape="circle" :labelDisabled="true">
                  <uv-checkbox labelSize="10" label="" :name="true">
                    <template #default>
                      <view style="font-size: 10px">
                        我们将收集紧急联系人姓名和手机号，仅用于需要紧急联系时使用
                        <br />
                        <text class="agreement" @click="handleAgreement">《实名认证协议》</text>
                      </view>
                    </template>
                  </uv-checkbox>
                </uv-checkbox-group>
              </view>
              <view class="fixed-button">
                <uv-button type="primary" text="返回修改" :plain="true" customStyle="margin-top: 10px" @click="previousStep"></uv-button>
                <uv-button type="primary" text="识别" customStyle="margin-top: 10px" @click="stepThreeSubmit"></uv-button>
              </view>
              <uv-safe-bottom></uv-safe-bottom>
            </view>
          </template>
          <template v-if="stepThree === 1">
            <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
              <swiper-item v-for="(item, index) in papersImages" :key="index" class="swiper-item">
                <image class="swiper-value" :src="item.value"></image>
              </swiper-item>
            </swiper>
            <view class="data-info padding-right-0">
              <uv-input border="bottom" inputAlign="right" disabledColor="white" color="#999999" placeholder="请输入姓名" v-model="identityForm.name">
                <template v-slot:prefix>
                  <uv-text text="真实姓名" size="13" margin="10rpx 0"></uv-text>
                </template>
              </uv-input>
              <uv-input border="bottom" inputAlign="right" disabledColor="white" color="#999999" placeholder="请输入身份证号" v-model="identityForm.card_num">
                <template v-slot:prefix>
                  <uv-text text="身份证号" size="13" margin="10rpx 0"></uv-text>
                </template>
              </uv-input>
              <view @click="handleSelectGender">
                <uv-input border="bottom" inputAlign="right" disabled disabledColor="white" color="#999999" placeholder="请选择性别" v-model="identityForm.gender">
                  <template v-slot:prefix>
                    <uv-text text="性别" size="13" margin="10rpx 0"></uv-text>
                  </template>
                </uv-input>
              </view>
            </view>
            <view v-html="formData.tips" style="padding: 20px 15px; background: white"></view>
            <view class="fixed-wrap">
              <view class="fixed-button">
                <uv-button type="primary" text="返回修改" :plain="true" customStyle="margin-top: 10px" @click="previousStepThree"></uv-button>
                <uv-button type="primary" text="确认提交" customStyle="margin-top: 10px" @click="submitData"></uv-button>
              </view>
              <uv-safe-bottom></uv-safe-bottom>
            </view>
          </template>
        </view>
      </template>
    </view>
  </cu-layout>
</template>

<script>
import { getSignedUrl, uploadImg } from '@/api/common'
import { getStorageCache, removeStorageCache } from '@/common/cache'
import { documentTypeColumns, genderColumns, pickerIncludes, positionColumns } from '@/common/enums/signingReservationEnum'
import { mapActions, mapGetters, mapMutations } from 'vuex'
import { bestAuthInfo, customerInfoOne, identity_ocr, reserveTemplate, roomInfo, signContract } from './api'

export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      current: 0,
      agreement: [],
      list: [
        {
          name: '租约信息',
          current: 0,
          disabled: false,
        },
        {
          name: '信息填写',
          current: 1,
          disabled: true,
        },
        {
          name: '身份验证',
          current: 2,
          disabled: true,
        },
      ],
      stepOne: 0,
      stepThree: 0,
      formData: {
        status: '', // 标记为预定转签约
        safeAreaInsets: 0,
        message: '请输入两位以上数字查询房间号',
        projectName: '',
        projectId: '',
        roomName: '',
        roomId: '',
        roomList: [],
        checkboxValue: [],
      },
      identityColumns: positionColumns,
      documentTypeColumns,
      pickerIncludes,
      genderColumns,
      userFormData: {
        phone: '',
        address: '',
        e_mail: '',
        occupation: '',
        company: '',
        emergency_name: '',
        emergency_tel: '',
        card_type: '大陆身份证',
      },
      identityForm: {
        name: '',
        card_num: '',
        gender: '',
        valid_date_begin: '',
        valid_date_end: '',
        message: '',
      },
      papersImages: [
        {
          value: '',
          tips: '请上传身份证头像照',
          preview: 'portrait.png',
        },
        {
          value: '',
          tips: '请上传身份证国徽照',
          preview: 'national-emblem.png',
        },
        {
          value: '',
          tips: '请上传手持证件照',
          preview: 'handheld.png',
        },
      ],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme', 'cityConfig', 'cameraUrl', 'userInfo']),
    companyInfo() {
      let info = {}
      if (this.userInfo?.company_info) {
        info = {
          ...this.userInfo.company_info,
          discount: this.userInfo.company_info.discount ? this.userInfo.company_info.discount + '%' : '',
          expiration_date: this.userInfo.company_info.begin_date ? this.userInfo.company_info.begin_date + ' 至 ' + this.userInfo.company_info.end_date : '',
        }
      }
      return info
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.formData.safeAreaInsets = this.$Platform.device.safeAreaInsets.bottom || 0
    const { projectName = '', projectId = '', status, roomId, room_number } = this.$Route.query
    this.formData.projectName = projectName
    this.formData.projectId = projectId
    this.formData.status = status
    this.formData.roomId = roomId
    this.formData.roomName = room_number
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  async onShow() {
    if (getStorageCache('reservedCompany')) {
      this.userFormData.company = getStorageCache('reservedCompany')
      removeStorageCache('reservedCompany')
    }
    const { certificatesIndex } = this.$Route.query
    if (certificatesIndex != undefined) {
      // const signedUrl = await this.getSignedUrl(this.cameraUrl?.uploadUrl)
      this.papersImages[certificatesIndex].value = this.cameraUrl?.uploadUrl
      this.$Route.query.certificatesIndex = undefined
      this.SET_CAMERA_URL('')
    }
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {
    console.log(this.userInfo, 'userInfo')
  },
  destroyed() {},
  methods: {
    ...mapActions([]),
    ...mapMutations('app', ['SET_CAMERA_URL']),
    async getSignedUrl(url) {
      const res = await getSignedUrl({ url })
      return res
    },
    handleSelectProject() {
      if (this.formData.status == 'convert') return
      this.$ROUTE.go('/pages/subpackage/reserved/select-project', { type: 'onlineSigning', path: '/pages/subpackage/online-signing/index' })
    },
    handleSelectRoom({ id }) {
      this.formData.roomId = id
    },
    async bindKeyInput(e) {
      if (this.formData.status == 'convert') return
      const { projectId } = this.formData
      this.formData.roomId = ''
      if (!projectId) return uni.$uv.toast('请先选择房源项目!')
      if (e == '') {
        this.formData.roomList = []
        this.formData.message = '请输入两位以上数字查询房间号'
        return
      } else {
        this.formData.message = '可选房间号'
      }
      uni.$uv.debounce(async () => {
        const { data } = await roomInfo({ project_id: projectId, room: e })
        this.formData.roomList = data
        this.formData.message = '可选房间号'
      }, 300)
    },
    previousStep() {
      this.current--
    },
    handleChange(e) {
      this.current = e.index
    },
    checkStepDataInfo() {
      if (!this.userFormData.address) {
        uni.$uv.toast('请完善通讯地址!')
        return false
      }
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
      if (!emailRegex.test(this.userFormData.e_mail)) {
        uni.$uv.toast('邮箱格式不正确!')
        return false
      }
      if (!this.userFormData.occupation) {
        uni.$uv.toast('请选择您的身份!')
        return false
      }
      // if (!this.userFormData.company) {
      //   uni.$uv.toast('请完选择您的公司!')
      //   return false
      // }
      const nameRegex = /^[\u4e00-\u9fa5]+$/
      if (!nameRegex.test(this.userFormData.emergency_name)) {
        uni.$uv.toast('请输入正确的紧急联系人姓名!')
        return false
      }
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.userFormData.emergency_tel)) {
        uni.$uv.toast('请输入正确的紧急联系人手机号!')
        return false
      }
      return true
    },
    submit() {
      if (this.current > 1) return
      let status = false
      switch (this.current) {
        case 1:
          // 校验用户信息填写数据为空
          status = this.checkStepDataInfo()
          if (!status) {
            return false
          }
          break
        default:
          break
      }
      this.current++
      const index = this.current
      this.list[index].disabled = false
    },
    checkStep1() {
      if (this.formData.checkboxValue.length === 0) {
        uni.$uv.toast('阅读完成并同意后,点击"下一步"!')
        return false
      }
      return true
    },
    async templateRentInfo() {
      const { cityId } = this.cityConfig
      const { data } = await reserveTemplate({
        projectId: this.formData.projectId,
        roomId: this.formData.roomId,
        cityId: cityId,
      })
      const { project_name, beike_room_name, room_number, room_type_name, area, old_rent, template, online_sign_clause, city_id, id, tips } = data
      this.formData.projectName = project_name
      this.formData.beike_room_name = beike_room_name
      this.formData.room_number = room_number
      this.formData.room_type_name = room_type_name
      this.formData.area = area
      this.formData.old_rent = old_rent
      this.formData.template = template
      this.formData.online_sign_clause = online_sign_clause
      this.formData.city_id = city_id
      this.formData.id = id
      this.formData.tips = tips
    },
    async customerInfoOne() {
      const { data } = await customerInfoOne()
      for (let key in this.userFormData) {
        this.userFormData[key] = data[key]
      }
    },
    documentTypeConfirm(e) {
      this.userFormData.card_type = e.value[0]
    },
    handleChangedocumentType() {
      this.$refs['ref-document-type-picker'].open()
    },
    checkStep0() {
      if (!this.formData.roomId) {
        uni.$uv.toast('请先选择签约房间!')
        return false
      }
      return true
    },
    async bestAuthInfo() {
      // const data = await bestAuthInfo({ name, identity })
    },
    async handleUploadImage(index) {
      // 微信小程序环境
      //#ifdef MP
      this.$Route.query.certificatesIndex = index
      this.$ROUTE.go('/pages/common/camera')
      //#endif

      // 如果是app环境 或者 h5环境
      //#ifdef APP-PLUS || H5
      uni.chooseImage({
        count: 1,
        success: async (res) => {
          const { tempFiles } = res
          const file = tempFiles[0]
          const params = {
            filePath: file.path,
            name: 'upfile',
            formData: {
              filename: file.name,
            },
          }
          const { data } = await uploadImg(params)
          this.papersImages[index].value = data?.signedUrl
        },
      })
      //#endif
    },
    // 租约信息
    async stepOneSubmit() {
      if (this.stepOne < 2) {
        let status = false
        switch (this.stepOne) {
          case 0:
            // 校验是否选择房间
            status = this.checkStep0()
            if (!status) {
              return false
            }
            await this.templateRentInfo()
            break
          case 1:
            status = this.checkStep1()
            if (!status) {
              return false
            }
            break
          case 2:
            this.bestAuthInfo()
            break
          default:
            break
        }
        this.stepOne++
      } else {
        await this.customerInfoOne()
        this.current++
        this.list[this.current].disabled = false
      }
    },
    previousStepOne() {
      this.stepOne--
    },
    handleSelectIdentity() {
      this.$refs.picker.open()
    },
    // 选择身份
    identityConfirm(e) {
      this.userFormData.occupation = e.value[0]
    },
    handleSelectCompany() {
      this.$ROUTE.go('/pages/subpackage/online-signing/select-company')
    },
    handleSelectGender() {
      this.$refs['gender-picker'].open()
    },
    genderConfirm(e) {
      this.identityForm.gender = e.value[0]
    },
    // 识别身份证
    async identityOcr() {
      const card_images = this.papersImages.map((item) => {
        let filteredUrl = item.value.replace(/\?x-oss-process=style.*/, '')
        return filteredUrl
      })
      const identityImage = card_images[0]
      const identityBackImage = card_images[1]
      const { errcode, data } = await identity_ocr({ identityImage, identityBackImage })
      if (errcode === 0) {
        for (let key in this.identityForm) {
          this.identityForm[key] = data[key]
        }
      }
    },
    handleAgreement() {
      this.$ROUTE.go('/pages/subpackage/privacy-policy/privacy-detail?title=实名认证&subtitle=face_agreement')
    },
    stepThreeSubmit() {
      if (!this.agreement.length) return uni.$uv.toast('请勾选确认授权!')
      if (this.papersImages.some((item) => !item.value)) {
        uni.$uv.toast('请先上传身份证照片!')
        return
      }
      // 暂时不做阻塞
      // const errcode =
      this.identityOcr()
      // console.log('errcode', errcode)
      // if (!errcode) return
      this.stepThree++
    },
    previousStepThree() {
      this.stepThree--
    },
    // 校验身份证信息
    async checkIdentityInfo() {
      const { name, card_num: identity, gender, valid_date_begin, valid_date_end, message } = this.identityForm
      const card_images = this.papersImages.map((item) => {
        let filteredUrl = item.value.replace(/\?x-oss-process=style.*/, '')
        return filteredUrl
      })
      const params = { card_images, gender, identity, message, name, status: 2, valid_date_begin, valid_date_end }
      const { errcode, errmsg } = await bestAuthInfo(params)
      if (errcode === 0) {
        return true
      } else {
        uni.$uv.toast(errmsg)
        return false
      }
    },
    async signContract() {
      const { projectId, roomId } = this.formData
      const { address, company, e_mail, emergency_name, emergency_tel, occupation } = this.userFormData
      const card_images = this.papersImages.map((item) => {
        let filteredUrl = item.value.replace(/\?x-oss-process=style.*/, '')
        return filteredUrl
      })
      const params = { address, card_images, company, e_mail, emergency_name, emergency_tel, from_anju: 0, occupation, project_id: projectId, room_id: roomId }
      const { errcode, errmsg } = await signContract(params)
      if (errcode === 0) {
        return true
      } else {
        uni.$uv.toast(errmsg)
        return false
      }
    },
    async submitData() {
      const { name, card_num, gender } = this.identityForm
      const nameRegex = /^[\u4e00-\u9fa5]+$/
      const idRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}([0-9Xx])$/
      if (!nameRegex.test(name)) {
        uni.$uv.toast('请输入正确的姓名!')
        return false
      }
      if (!idRegex.test(card_num)) {
        uni.$uv.toast('请输入正确的身份证号码!')
        return false
      }
      if (!gender) {
        uni.$uv.toast('请选择性别!')
        return false
      }
      const isCheck = await this.checkIdentityInfo()
      // if (!isCheck) return
      const isSubmit = await this.signContract()
      if (isSubmit) {
        uni.redirectTo({ url: '/pages/subpackage/online-signing/submit-page' })
        // this.$ROUTE.go('/pages/subpackage/online-signing/submit-page')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('online-signing-container')} {
  position: relative;
  background: #f7f7f7;
  .tabs-masking {
    position: fixed;
    height: 44px;
    background: rgba(0, 0, 0, 0);
    z-index: 999;
    width: 100%;
  }
  .data-info-step0 {
    margin: 16rpx 0;
    background: white;
    box-sizing: border-box;
    overflow: hidden;
    border-left: 0;
    border-right: 0;
    .room-list {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      background: white;
      .tips {
        border: 20rpx solid #f5f5f5;
        width: 100%;
        padding: 20rpx 0;
        text-align: center;
      }
      .room-item {
        border: 2px solid $uv-primary;
        border-radius: 8px;
        margin: 10px;
        width: calc(calc(100% - 60px) / 3);
        box-sizing: border-box;
        text {
          display: block;
          padding: 0 10rpx;
          &:first-child {
            background: $uv-primary;
            color: white;
            text-align: center;
          }
          &:nth-child(2) {
            margin: 5px 0 15px;
          }
          &:nth-child(3) {
            font-weight: bold;
          }
        }
        .price {
          display: flex;
          justify-content: space-between;
          padding: 0 10rpx;
          font-size: 20rpx;
        }
      }
    }
  }
  .ccc {
    color: #999999;
  }
  .data-info-step1,
  .data-info-step2 {
    padding-bottom: 70px;
  }
  .card {
    margin: 15px;
    background: white;
    padding: 15px;
    border-radius: 8px;
    .title {
      position: relative;
      padding-left: 10px;
      margin-top: 0;
      margin-bottom: 10px;
      &::before {
        width: 3px;
        height: 100%;
        position: absolute;
        background: $uv-primary;
        left: 0;
        content: ' ';
      }
    }
    .room-info {
      .room-name {
        font-size: 28rpx;
        margin-top: 30rpx;
        margin-bottom: 20rpx;
        color: #999999;
      }
    }
    ::v-deep .uv-input {
      padding-left: 0 !important;
      &:last-child {
        border-color: white !important;
      }
    }
  }
  .fixed-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to bottom, white, #f5f5f5);
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    .fixed-button {
      display: flex;
      flex-wrap: wrap;
      .tips-container {
        flex-basis: 100%;
        font-size: 10px;
        color: #999999;
        text-align: center;
      }
      ::v-deep .uv-button-wrapper {
        flex: 1;
        margin: 0 15px;
      }
    }
  }
}
.agreement {
  color: $uv-primary;
}
.online-signing-card {
  // width: 100%;
  box-sizing: border-box;
  padding: 15px;
  background: white;
  margin: 10px;
  box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8rpx;
}
.stepOne {
  position: relative;
  .title {
    position: relative;
    padding-left: 10px;
    width: 100%;
    margin-bottom: 10px;
    &::before {
      position: absolute;
      content: ' ';
      background: $uv-primary;
      width: 3px;
      height: 100%;
      left: 0;
      border-radius: 8rpx;
    }
  }
  .room-tag-wrap {
    display: flex;
    flex-wrap: wrap;
    .room-tag {
      font-size: 24rpx;
      margin-right: 5px;
      margin-bottom: 5px;
      // background: $uv-primary;
      border-color: #999999;
      color: #999999;
      border: 1px solid;
      border-radius: 5px;
      padding: 3px 8px;
      // color: white;
    }
  }
  .project-name,
  .room-name {
    color: #333;
    margin-bottom: 10px;
  }
  .project-tag {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 22rpx;
    border: 1px solid #cccccc;
    padding: 5rpx 8rpx;
  }
  .monthly-rent {
    position: absolute;
    right: 20px;
    bottom: 50px;
  }
  .price {
    color: $uv-price-primary;
    margin-right: 5px;
    font-size: 40rpx;
  }
  .online-signing-row {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1px solid #f1f1f1;
    &:last-child {
      border: 0;
      padding-bottom: 0;
    }
    .left {
      margin-right: 20px;
      width: 100px;
    }
  }
  .border_none {
    border: 0 !important;
  }
  .small-tips {
    font-size: 12px;
    color: #777;
    padding-top: 0rpx !important;
  }
}
.data-info-step1 .data-info {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  padding: 0 8px 0 12px;
}
.data-info-step1 .padding-right-0 {
  padding-right: 0;
}
.data-info-step2 {
  .ID-card-wrap {
    box-sizing: border-box;
    padding: 20px 15px 40px;
    background: white;
    .ID-card {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      border: 1px dashed #439dbc;
      margin: 20px auto 0;
      border-radius: 4px;
      width: 343px;
      height: 216px;
      position: relative;
      .subscript-container {
        width: 277px;
        height: 164px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        .preview {
          width: 183px;
          height: 116px;
          border-radius: 8rpx;
        }
        .upload-image {
          position: absolute;
          width: 48px;
          height: 48px;
        }
        .left-top {
          width: 20px;
          height: 20px;
          position: absolute;
          left: 0;
          top: 0;
        }
        .right-top {
          width: 20px;
          height: 20px;
          position: absolute;
          right: 0;
          top: 0;
        }
        .left-bottom {
          width: 20px;
          height: 20px;
          position: absolute;
          left: 0;
          bottom: 0;
        }
        .right-bottom {
          width: 20px;
          height: 20px;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
      .image-container {
        width: 100%;
        height: 100%;
        position: relative;
        // display: flex;
        .value-image {
          width: 100%;
          height: 100%;
        }
        .upload-image {
          position: absolute;
          width: 48px;
          height: 48px;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto;
          z-index: 2;
        }
      }
      .tips {
        position: absolute;
        bottom: 20px;

        font-weight: 400;
        font-size: 14px;
        color: #999999;
        line-height: 14px;
      }
      // image {
      //   width: 183px;
      //   height: 116px;
      //   border-radius: 8rpx;
      // }
    }
  }
  .data-info {
    margin-top: 10px;
    background: white;
  }
}
.html-wrap {
  padding: 15px 15px 150px;
}
.swiper {
  padding: 15px 20px;
  background: white;
  height: 218px;
}
.swiper-item {
  display: block;
  height: 218px;
  line-height: 218px;
  text-align: center;
  box-sizing: border-box;
  padding: 0 10px;
}
.swiper-value {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.require {
  color: red;
  margin: 3px;
  font-size: 10px;
}
</style>
